<template>
  <div>
    <a-upload
      listType="picture-card"
      :action="uploadUrl"
      :beforeUpload="beforeUpload"
      :fileList="fileList"
      :headers="headers"
      :remove="removeFile"
      @preview="handlePreview"
      @change="handleChange">
      <div v-if="fileList.length < 1">
        <a-icon type="plus" />
        <div class="ant-upload-text">
          选择图片
        </div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="cancelPreview">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
  import {
    api,
    deleteFile
  } from '@/api/site/upload.js'
  import store from '@/store'
  import { DEFAULT_SITE } from '@/store/mutation-types'
  import storage from 'store'
  export default {
    name: 'SiteUpload',
    components: {},
    data () {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 3
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 20
          }
        },
        rules: [],
        fileList: [],
        previewVisible: false,
        previewImage: '',
        uploadUrl: api.upload,
        headers: {
          Authorization: 'bearer  ' + store.getters.token,
          'Default-Site': storage.get(DEFAULT_SITE)
        }
      }
    },
    created () {

    },
    methods: {
      beforeUpload (file, fileList) {
        let contin = true
        if (file.size >= 104857600) {
          contin = false
          this.$message.error('文件大小超过最大限制 100M')
        }
        return contin
      },
      handleChange (e) {
        this.fileList = e.fileList
        if (e.file.status === 'done') {
          if (e.file.response.code !== 0) {
            this.fileList = []
            this.$message.error(e.file.response.msg)
          }
        }
      },
      removeFile (file) {
        if (file && !file.error && file.response && file.response.res.fileUid) {
          deleteFile({
            fileUid: file.response.res.fileUid
          }).then(response => {
            if (response.code === 0) {
              console.log('delete file success')
            }
          })
        }
      },
      handlePreview (file, fieldName) {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
      cancelPreview () {
        this.previewVisible = false
        this.previewImage = null
      },
      getValue () {
        if (this.fileList.length > 0) {
          const data = this.fileList[0]
          if (data.hasOwnProperty('response')) {
            const value = data.response.res
            return {
                uid: value.id,
                name: value.fileName,
                status: 'done',
                url: value.fileFullPath,
                thumbUrl: value.fileFullPath
            }
          } else {
            return data
          }
        }
        return ''
      },
      setValue (value) {
        if (value) {
          this.beforeSetVal(value)
        }
      },
      beforeSetVal (value) {
         if (value) {
           this.clear()
           this.fileList.push(value)
        }
      },
      clear () {
        this.fileList = []
      }
    }
  }
</script>
